<template>
  <div class="login">
    <div class="login_box">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules" 
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <p class="login_title">欢迎登录 - MMALL管理系统</p>
        <el-form-item prop="pass">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-button type="primary" @click="login()">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { Request } from "@/until/request";
import { login } from "@/request/http";
export default {
  name: "Login",
  data() {
    //验证函数的封装
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账户"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    return {
      ruleForm: {
        username: "admin",
        password: "admin"
      },
      username: "",
      password: "",
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      local: { userToken: false }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //登录
    login() {
      // Request.getData({
      //   //
      //   url: `/api/user/login.do?username=${this.ruleForm.username}&password=${this.ruleForm.password}`,
      //   method: "post"
      //   //    参数名：参数值，参数名：参数值
      //   // data:{username:this.ruleForm.username,password:this.ruleForm.password}
      // }).then(data => {
        login(this.ruleForm)
        .then(data=>{
        console.log(data);
        if (data.data.status == 0) {
          // this.$store.state.userToken = true;
          
          this.$message(data.data.msg);
          // this.local.userToken = true;
          // localStorage.setItem("admin", JSON.stringify(this.local));
          localStorage.setItem("admin",this.ruleForm.username);
          this.$router.push("/");
        } else {
          this.$message(data.data.msg);
        }
      });
    }
  },
  // created() {
  //   localStorage.setItem("admin", JSON.stringify(this.local));
  // }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.login {
  @include SizeBack(100%, 100%, #f3f3f3);
  padding-top: 200px;
  box-sizing: border-box;
}
.login_box {
  @include SizeBack(30%, 30%, white);
  @include Pd(10px 15px 20px);
  margin: 0 auto;
}
.login_title {
  @include FontOnly(16px);
  margin-bottom: 10px;
}
.el-button {
  width: 100%;
  background: #337ab7;
  @include FontOnly(20px);
}
</style>